<template>
  <panel title="店铺管理">
    <el-button slot="btn" type="primary" @click="conserve">保存</el-button>
    <el-form label-width="80px" :model="shopList">
      <el-form-item label="店铺名称">
        <el-input :value="shopList.name"></el-input>
      </el-form-item>
      <el-form-item label="店铺公告">
        <el-input type="textarea" :value="shopList.bulletin"></el-input>
      </el-form-item>
      <el-form-item label="店铺头像">
        <el-upload class="avatar-uploader" :action="BASE_URL + '/shop/upload'" :show-file-list="false"
          :on-success="success">
          <img v-if="imageUrl" :src="BASE_URL + imageUrl" alt="" class="avatar">
          <img v-else-if="shopList.avatar" :src="`${BASE_URL}/upload/shop/${shopList.avatar}`" alt="">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="店铺图片">
        <div class="file-list">
          <div class="img-box" v-for="(item, key) in shopList.pics" :key="key">
            <img :src="BASE_URL + '/upload/shop/' + item" alt="" class="avatar">
            <span @click="remove(key)">×</span>
          </div>
        </div>
        <div class="addImg">
          <el-upload class="avatar-uploader" :show-file-list="false" :action="BASE_URL + '/shop/upload'"
            :on-success="success1">
            <img v-if="imageUrls" :src="imageUrls" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="配送费">
        <el-input type="number" :value="shopList.deliveryPrice"></el-input>
      </el-form-item>
      <el-form-item label="配送时间">
        <el-input type="number" :value="shopList.deliveryTime"></el-input>
      </el-form-item>
      <el-form-item label="配送描述">
        <el-input :value="shopList.description"></el-input>
      </el-form-item>
      <el-form-item label="起送价格">
        <el-input type="number" :value="shopList.minPrice"></el-input>
      </el-form-item>
      <el-form-item label="店铺评分">
        <el-input type="number" :value="shopList.score"></el-input>
      </el-form-item>
      <el-form-item label="销量">
        <el-input type="number" :value="shopList.sellCount"></el-input>
      </el-form-item>
      <el-form-item label="活动">
        <el-checkbox-group v-model="shopList.supports">
          <el-checkbox v-for="item in checkList" :key="item" :label="item"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label=" 营业时间">
        <el-time-picker is-range v-model="shopList.date" range-separator="至" start-placeholder="开始时间"
          end-placeholder="结束时间" placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item>
    </el-form>
  </panel>
</template>
  
<script>
import { shopConserveReq, shopMsgReq } from '@/api/shop.api'
import { BASE_URL } from '@/utils/common'
import { clearObject } from '@/utils/common'
export default {
  data() {
    return {
      checkList: ['在线支付满28减5', '单人精彩套餐', 'VC无限橙果汁全场8折', '特价饮品八折抢购', '国庆特价', '中秋特惠', '元宵活动满30减15'],
      BASE_URL,
      imageUrl: '',
      imageUrls: '',
      // 获取店铺的详情信息
      shopList: {
        supports: []
      },
      // 店铺图片
      dialogVisible: false
    }
  },
  methods: {
    remove(i) {
      this.shopList.pics.splice(i, 1)
    },
    // 获取check的变化
    // checkChange(val) {
    //   this.checkList = val
    // },
    // 店铺图片上传成功的钩子函数
    success1(res) {
      this.shopList.pics.push(res.imgUrl.replace('/upload/shop/', ''))
    },
    // 图片上传时
    //  删除图片时
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    // 店铺头像上传成功的钩子函数
    success(res) {
      console.log(res);
      this.imageUrl = res.imgUrl
    },
    // 获取店铺详情信息的接口函数
    async shopMsg() {
      const res = await shopMsgReq()
      // 将后端传过来的数据赋值给shopList
      this.shopList = res.data.data
      // this.shopList.supports里面的数据交给checkList，用于渲染默认选中的数据
      // this.checkList = this.shopList.supports
    },
    // 保存修改后的店铺信息
    conserve() {
      // this.shopList.supports = this.checkList
      /* 判断imageUrl是否有值(判断用户是否修改店铺头像，当imageUrl不为空时，用户上传头像，
      将imageUrl的值处理好后赋值给this.shopList.avatar)
      */
      if (this.imageUrl) {
        this.shopList.avatar = this.imageUrl.split('/').pop()
      }
      console.log(this.shopList);
      // this.shopList.supports = this.chec
      const data = { ...this.shopList }
      // 修改数据后请求接口函数
      shopConserveReq(data).then(res => {
        // 当code==0时，修改成功，重新请求一次数据
        if (res.data.code === 0) {
          this.$message.success(res.data.msg)
          // this.shopMsg()
        }
      })
    }
  },

  // 进入页面获取店铺信息
  created() {
    this.shopMsg()
  }
};
</script>
  
<style lang="less" scoped>
.el-form-item {
  width: 400px;
}

.img-box {
  position: relative;

  img {
    width: 178px;
    height: 178px;
  }

  span {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 30px;
    color: red;
    display: none;
    cursor: pointer;
  }

  &:hover span {
    display: inline-block;
  }

}

// /deep/ .el-upload {
//   text-align: left;
// }
.avatar-uploader {
  img {
    width: 178px;
    height: 178px;
  }
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
}

.file-list {
  width: 600px;
  display: flex;
  flex-wrap: wrap;

  img {
    margin-left: 10px;
    margin-top: 10px;

  }
}

.avatar-uploader {
  margin-left: 10px;
  margin-top: 10px;

  img {
    margin: 0;
    padding: 0;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>